<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h1>Webcodec&Webtransport push demo</h1>
        <br/>
        <div>
            <label for="serverHost">Websocket Server Host:</label>
            <input type="text" id="serverHost" placeholder="hostname:port, eg: localhost:1900" style="width:300px;margin-right:8px;">
            <label for="subpath">SubPath:</label>
            <input type="text" id="subpath" placeholder="live/livestream" style="width:250px;margin-right:8px;">
            <button id="connectId">connect</button>
            <button id="cameraId">Camera</button>
            <button id="screenId">Screen</button>
            <button id="disconnectId">disconnect</button>
            <br/>
            <label>Camera Position: </label>
            <button id="lefttop">left top</button>
            <button id="righttop">right top</button>
            <button id="leftbottom">left bottom</button>
            <button id="rightbottom">right bottom</button>
        </div>
        <br/>
        <div id="medialive">
            <label id=playurlLabel>playurl:</label><br/>
            <label id=previewLabel>publish preview:</label>
            <div id="container">
                <canvas id="CanvasMediaId" width="1280" height="720" style="border:1px solid #000000;">
                </canvas>
            </div>
        </div>
    </body>
</html>
